<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="icon-container">
      <text class="success-icon">✔</text>
    </view>

    <!-- 成功文案 -->
    <view class="message">
      <text class="title">兑换成功！</text>
      <text class="desc">您的订单已提交成功，请耐心等待发货</text>
    </view>

    <!-- 操作按钮 -->
    <view class="actions">
      <button type="default" @click="goToOrderDetail">查看订单</button>
      <button class="success" @click="goToHome">返回首页</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { showError } from "@/utils/feedback.js";

const order_id = ref("");
/**
 * 页面加载生命周期
 * @param {Object} options - 路由参数
 */
onLoad((options) => {
  if (options.order_id) {
    order_id.value = options.order_id;
  } else {
    showError("订单信息异常");
    setTimeout(() => {
      uni.switchTab({ url: '/pages/index/index' });
    }, 1500);
  }
});

/**
 * 跳转至订单详情页
 */
const goToOrderDetail = () => {
  uni.redirectTo({
    url: `/pages/order/detail?id=${order_id.value}`,
  });
};

/**
 * 跳转至首页
 */
const goToHome = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
</script>

<style scoped lang="scss">
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #28b389;
  color: white;
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.message {
  text-align: center;
  margin-bottom: 30px;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
  }

  .desc {
    font-size: 14px;
    color: #666;
  }
}

.order-info {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: $uni-border-radius-base;
  margin-bottom: 40px;

  .info-item {
    display: flex;
    margin-bottom: 12px;

    .label {
      font-size: 14px;
      color: #666;
      width: 80px;
    }

    .value {
      font-size: 14px;
      color: #333;
      flex: 1;
    }
  }
}

.actions {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  width: 100%;
  align-items: center;

  button {
    border-radius: 10px;
    flex: 1;
  }
  .success{
    background-color: $uni-color-primary;
    color: #ffffff;
  }
}
</style>